<!-- 材料列表 -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>材料列表</title>
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/element.min.css?1" />
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_fxbjeay8y8g.css" />
        <link rel="stylesheet" href="../css/reset.css?31232">
        <link rel="stylesheet" href="../css/setlayui.css?12">
		<script src="../layui/layui.all.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript" src="../js/element.min.js"></script>
	</head>
	<body>
		<div id="app" class="page-container" style="display: none" v-show="showApp">
			<div class="top_but_box" ref="butbox">
                <el-button type="primary" @click="addcl">
					<div class="but_cont">
						<div class="iconfont iconcailiaodaiban"></div>
						<div class="but_txt">添加材料</div>
					</div>
                </el-button>
                <el-button type="primary" @click="addGg">
					<div class="but_cont">
						<div class="iconfont iconguige"></div>
						<div class="but_txt">添加规格</div>
					</div>
				</el-button>
                <el-button type="primary" @click="enablebut(1)">
					<div class="but_cont">
						<div class="iconfont iconqiyong"></div>
						<div class="but_txt">材料启用</div>
					</div>
				</el-button>
                <el-button type="primary" @click="enablebut(2)">
					<div class="but_cont">
						<div class="iconfont iconjinyong-"></div>
						<div class="but_txt">材料禁用</div>
					</div>
				</el-button>
			</div>
			<div class="table_box" ref="tablebox">
                <el-table 
                    :span-method="objectSpanMethod" 
                    :data="tableData" 
                    
                    :row-class-name="tableRowClassName"
                    height="100%" 
                    border
                    :cell-style="{background:'#fff'}"
                    @row-click="rowclick"
                    ref="multipleTable"
                    @selection-change="selectionchange"
                    header-row-class-name="table_th" 
                    style="width: 100%">
					<el-table-column type="selection" align="center" width="50"> </el-table-column>

					<el-table-column prop="typeid" label="序号" align="center" width="50"> </el-table-column>

					<el-table-column prop="materialName" label="材料名称" align="center" show-overflow-tooltip min-width="124">
                    </el-table-column>

					<el-table-column prop="unit" min-width="120" label="单位" align="center" show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column prop="x_specificationName" label="规格型号" align="center" show-overflow-tooltip min-width="110">
                    </el-table-column>

					<el-table-column prop="x_createUserName" min-width="90" label="录入人" align="center" show-overflow-tooltip>
                    </el-table-column>

					<el-table-column prop="x_createTime" width="160" label="录入日期" align="center" show-overflow-tooltip>
                    </el-table-column>
                    
                    <el-table-column prop="x_priceTax" width="100" label="操作" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <div  class="table_but">
                                <el-button @click.stop="ggenablebut(1, scope.row)" v-if="(!scope.row.x_isEnableMaterial || scope.row.x_isEnableMaterial == 0) || (!scope.row.x_isEnable || scope.row.x_isEnable == 0)" type="text">启用</el-button>
                                <el-button @click.stop="ggenablebut(2, scope.row)" v-if="scope.row.x_isEnableMaterial == 1 && scope.row.x_isEnable == 1" type="text">禁用</el-button>
                            </div>
                        </template>
                    </el-table-column>
				</el-table>
			</div>
			<div class="pagination_box" ref="paginations">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageindex" :page-sizes="[20, 100, 200, 300, 400]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="totals"> </el-pagination>
            </div>
            <div class="hidden_box">
                <input id="publicValue" value="" type="text">
            </div>
        </div>
		<script src="../js/public.js?12345"></script>
		<script>
			var layer = layui.layer;
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						showApp: false,
						pagesize: 20,
                        pageindex: 1,
                        selected: [],
                        selectid: '',
                        totals: 0,
                        projectId: '',
                        tableData: [],
                        companyId: ''
					};
				},
				methods: {
                    ggenablebut (type, row) {
                        if (type == 1 && row.x_isEnableMaterial == 1 && row.x_isEnable == 1) {
                            this.$message({
                                message: '改规格已启用',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        if (type == 2 && (!row.x_isEnableMaterial || row.x_isEnableMaterial == 0)) {
                            this.$message({
                                message: '改规格已禁用',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        var that = this
                        xLoading(true, '加载中')
                        $.ajax({
                            type: 'post',
                            headers: {
                            },
                            url: baseUrl + '/Material/SetMaterialSpescEnableStatus',
                            data: {
                                materialId: row.x_materialId,
                                isEnable: type == 1 ? 1 : 0,
                                specificationIds: row.x_specificationId
                            },
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                that.$message({
                                    message: '操作成功',
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    that.getCgjhListData()
                                }, 500)
                            }
                        });
                    },
                    addcl () {
                        var that = this
                        layer.open({
                            type: 2,
                            title: '添加材料',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            area: ['40%', '60%'],
                            content: 'addCl.html?' + new Date().getTime(),
                            end: function() {
                                that.getCgjhListData()
                            }
                        });
                    },
                    addGg () {
                        var that = this
                        if (this.selected.length == 0) {
                            this.$message({
                                message: '请选择一条数据',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        if (this.selected.length > 1) {
                            this.$message({
                                message: '请选择一条数据',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        var objs = {
                            recid: this.selected[0].materialId,
                            names: this.selected[0].materialName,
                            unit: this.selected[0].unit
                        }
                        layer.open({
                            type: 2,
                            title: '添加规格',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            area: ['40%', '60%'],
                            content: 'addClGg.html?objs='+  encodeURIComponent(JSON.stringify(objs))  +'&' + new Date().getTime(),
                            end: function() {
                                that.getCgjhListData()
                            }
                        });
                    },
                    enablebut (type) {
                        if (this.selected.length == 0) {
                            this.$message({
                                message: '请选择一条数据',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        
                        for (var i = 0; i < this.selected.length; i++) {
                            if (this.selected[i].isEnable == 1 && type == 1) {
                                this.$message({
                                    message: '只能选择被禁用的材料',
                                    type: 'warning',
                                    duration: 1000
                                });
                                return false
                            }
                            if ((!this.selected[i].isEnable || this.selected[i].isEnable == 0) && type == 2) {
                                this.$message({
                                    message: '只能选择已启用的材料',
                                    type: 'warning',
                                    duration: 1000
                                });
                                return false
                            }
                        }
                        var materialIds = []
                        for (var i = 0; i < this.selected.length; i++) {
                            materialIds.push(this.selected[i].materialId)
                        }
                        var that = this
                        xLoading(true, '加载中')
                        $.ajax({
                            type: 'post',
                            headers: {
                            },
                            url: baseUrl + '/Material/SetMaterialEnableStatus',
                            data: {
                                materialIds: materialIds.join(','),
                                isEnable: type == 1 ? 1 : 0
                            },
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                that.$message({
                                    message: '操作成功',
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    that.getCgjhListData()
                                }, 500)
                            }
                        });
                    },
                    // 斑马线
					tableRowClassName(value) {
						var classname = '';
						if  (value.row.typeid % 2 > 0) {
						    classname = 'success-row';
						} else if (value.row.typeid % 2 === 0) {
							classname = 'warning-row';
                        }
                        if (value.row.typeid === this.selectid) {
                            classname = classname + ' selected-row';
                        }
						return classname;
                    },
                    selectall () {
                        this.$refs.multipleTable.clearSelection();
                    },
                    select(selection, row) {
                        if (selection.length > 1) {
                            var del_row = selection.shift()
                            for (var i = 0; i < this.tableData.length; i++) {
                                if (del_row.typeid == this.tableData[i].typeid) {
							        this.$refs.multipleTable.toggleRowSelection(this.tableData[i], false);
                                }
                            }
                        }
                    },
                    // 点击某一行选择
					rowclick(row, column, event) {
						// this.$refs.multipleTable.clearSelection();
                        // this.$refs.multipleTable.toggleRowSelection(row);
						if (row) {
                            for (var i = 0; i < this.tableData.length; i++) {
                                if (row.typeid == this.tableData[i].typeid && this.tableData[i].isFather) {
							        this.$refs.multipleTable.toggleRowSelection(this.tableData[i]);
                                }
                            }
						}
                    },
                    selectionchange (val) {
                        this.selected = val;
                        if (val.length > 0) {
                            this.selectid = val[0].typeid
                        } else {
                            this.selectid = ''
                        }
                    },
					// 每页显示条数切换
					handleSizeChange(val) {
						this.pagesize = val;
                        this.pageindex = 1;
                        this.getCgjhListData()
					},
					// 页数切换
					handleCurrentChange(val) {
                        this.pageindex = val;
                        this.getCgjhListData()
                    },
                    // 合并单元格
                    objectSpanMethod(item) {
                        if (item.columnIndex == 0 || item.columnIndex == 1 || item.columnIndex == 2 || item.columnIndex == 3) {
                            return {
                                rowspan: item.row.hbhs,
                                colspan: item.row.hbhs > 0 ? 1 : 0
                            };
                        }
                    },
                    // 获取采购计划列表
                    getCgjhListData () {
                        var that = this
                        xLoading(true)
                        $.ajax({
                            type: 'post',
                            headers: {
                            },
                            url: baseUrl + '/Material/GetMaterialList',
                            data: {
                                projectId: that.projectId,
                                page: that.pageindex,
                                pageSize: that.pagesize,
                                isEnable:0
                            },
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                var allData = []
                                for (var i = 0; i < res.data.length; i++) {
                                    res.data[i].hbhs = 1
                                    res.data[i].typeid = i+1
                                    res.data[i].isFather = true
                                    if (res.data[i].specificationList && res.data[i].specificationList.length > 0) {
                                        for (var j in res.data[i].specificationList[0]) {
                                            res.data[i]['x_' + j] = res.data[i].specificationList[0][j]
                                        }
                                    }
                                    allData.push(res.data[i])
                                    for (var j = 1; j < res.data[i].specificationList.length; j++) {
                                        res.data[i].specificationList[j].hbhs = 0
                                        res.data[i].specificationList[j].typeid = i+1
                                        var newobj = {}
                                        for (var k in res.data[i].specificationList[j]) {
                                            if (k == 'hbhs' || k == 'typeid') {
                                                newobj[k] = res.data[i].specificationList[j][k]
                                            } else {
                                                newobj['x_' + k] = res.data[i].specificationList[j][k]
                                            }
                                        }
                                        allData.push(newobj)
                                    }
                                }
                                for (var i = 0; i < allData.length; i++) {
                                    if (allData[i].specificationList && allData[i].specificationList.length > 0) {
                                        allData[i].hbhs = allData[i].specificationList.length
                                    }
                                }
                                that.tableData = allData
                                that.totals = res.total
                            }
                        });
                    },
                    // 查看
                    checkBut () {
                        if (this.selected.length == 0) {
                            this.$message({
                                message: '请选择一条数据',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        var that = this
                        layer.open({
                            type: 2,
                            title: '查看合同',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            // area: ['56.7%', '89.8%'],
                            area: ['91.4%', '89.81%'],
                            content: 'checkHt.html?companyId='+ that.companyId +'&cghtId=' + that.selected[0].id + '&projectId=' + that.projectId + '&' + new Date().getTime(),
                            end: function() {
                            }
                        });
                    },
                    // 修改
                    editBut () {
                        if (this.selected.length == 0) {
                            this.$message({
                                message: '请选择一条数据',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        var that = this
                        layer.open({
                            type: 2,
                            title: '修改合同',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            // area: ['56.7%', '89.8%'],
                            area: ['91.4%', '89.81%'],
                            content: 'editHt.html?companyId='+ that.companyId +'&cghtId=' + that.selected[0].id + '&projectId=' + that.projectId + '&' + new Date().getTime(),
                            end: function() {
                                that.getCgjhListData();
                            }
                        });
                    },
                    // 添加
                    addBut () {
                        var that = this
                        layer.open({
                            type: 2,
                            title: '添加合同',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            // area: ['56.7%', '89.8%'],
                            area: ['91.4%', '89.81%'],
                            content: 'addHt.html?companyId='+ that.companyId +'&projectId=' + that.projectId + '&' + new Date().getTime(),
                            end: function() {
                                that.getCgjhListData();
                            }
                        });
                    },
                    // 修改订单
                    editOrder () {
                        var that = this
                        layer.open({
                            type: 2,
                            title: '修改订单',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            // area: ['56.7%', '89.8%'],
                            area: ['91.4%', '89.81%'],
                            content: 'addCgorder.html?companyId='+ that.companyId +'&projectId=' + that.projectId + '&' + new Date().getTime(),
                            end: function() {
                                that.getCgjhListData();
                            }
                        });
                    },
                    // 添加订单
                    addOrder () {
                        var that = this
                        layer.open({
                            type: 2,
                            title: '添加订单',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            // area: ['56.7%', '89.8%'],
                            area: ['91.4%', '89.81%'],
                            content: 'addCgorder.html?companyId='+ that.companyId +'&projectId=' + that.projectId + '&' + new Date().getTime(),
                            end: function() {
                                that.getCgjhListData();
                            }
                        });
                    },
                    enterJcd () {
                        var that = this
                        var obj = {}
                        if (this.selected.length > 0) {
                            obj.contractId = this.selected[0].id
                            obj.contractName = this.selected[0].title
                            obj.supplierId = this.selected[0].suppilerId
                            obj.supplierName = this.selected[0].suppilerName
                        }
                        layer.open({
                            type: 2,
                            title: '添加进场单',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            // area: ['56.7%', '89.8%'],
                            area: ['62.23%', '98.88%'],
                            content: '/ApsPublic/cljc/add.html?companyId='+ that.companyId +'&htObj='+ encodeURIComponent(JSON.stringify(obj)) +'&projectId='+ that.projectId + '&' + new Date().getTime(),
                            end: function() {
                                that.getCgjhListData();
                            }
                        });
                    }
				},
				mounted() {
					this.showApp = true;
					var that = this;
					setTimeout(function () {
						var aa = that.$refs.butbox.offsetHeight + that.$refs.paginations.offsetHeight;
						var ss = 'calc(100% - ' + aa + 'px)';
						that.$refs.tablebox.style.height = ss;
                    }, 2);
                    this.projectId = getQuerys('projectId')
                    this.companyId = getQuerys('companyId')
                    this.getCgjhListData()
				}
			});
		</script>
	</body>
	<style>
        .page-container {
            width: 100%;
            height: 100%;
            padding: 16px;
        }
        /* 按钮 */
        .top_but_box {
            display: flex;
            padding: 16px 0;
        }
        .top_but_box .el-button {
            padding: 0;
            margin: 0;
            height: 32px;
            background: transparent;
            border: 1px solid #5574D7;
            border-radius: 5px;
            margin-right: 20px;
        }
        .top_but_box .but_cont {
            display: flex;
            padding: 0 16px;
            color: #5574D7;
            align-items: center;
        }
        .top_but_box .but_cont .but_txt {
            margin-left: 10px;
        }

        .top_but_box .el-button:focus, .top_but_box .el-button:hover {
            color: rgba(85, 116, 215, 1);
            border-color: rgba(85, 116, 215, 0.1);
            background-color: #ecf5ff;
        }
        .top_but_box .el-button:focus .but_cont, .top_but_box .el-button:hover .but_cont{
            color:rgba(85, 116, 215, 0.8);
        }
        .top_but_box .el-button:active {
            color:rgba(85, 116, 215, 0.8);
            border-color:rgba(85, 116, 215, 0.8);
            outline: none;
        }
        .top_but_box .el-button:active .but_cont{
            color:rgba(85, 116, 215, 0.8);
        }
        /* 分页 */
        .pagination_box {
            padding: 2.7vh 0 3.7vh;
        }
        .el-pagination {
            display: flex;
            justify-content: center;
        }
        .pagination_box .el-pagination button {
            border: 1px solid #D6D6D6;
            border-radius: 5px!important;
            background-color: transparent!important;
        }
        .pagination_box .el-pager li {
            border-radius: 5px!important;
            border: 1px solid #D6D6D6!important;
            background: transparent!important;
        }
        .el-pagination.is-background .el-pager li:not(.disabled):hover {
            color:#5574D7;
        }
        .el-pagination.is-background .el-pager li:not(.disabled).active {
            background:#5574D7!important;
            border: none!important;
            color: #fff;
        }
        /* 表格 */
        .el-table th.gutter{
            display: table-cell!important;
        }
        .el-table--striped .el-table__body tr.el-table__row--striped td {
            background: #f8f8f8;
        }
        .el-table th{
            background: linear-gradient(0deg, #F5F7FA, #ECEFF6, #F5F7FA);
        }
        .table_th {
            box-shadow: 0px 1px 1px 0px rgba(234, 235, 240, 0.75), 0px 1px 1px 0px #F7F8FA;
        }
        .el-table td, .el-table th{
            color: #333333;
            padding: 0;
            height: 32px;
        }
        .el-tooltip__popper.is-dark {
            background: #FFFFFF;
            color: #333333;
            box-shadow: 0px 1px 8px 0px rgba(97, 97, 97, 0.6);
        }
        .el-tooltip__popper[x-placement^=top] .popper__arrow::after {
            border-top-color: #FFFFFF;
        }
        .el-tooltip__popper[x-placement^=top] .popper__arrow {
            border-top-color: #FFFFFF;
        }
        .el-tooltip{
            width: 100% !important;
        }
        .el-table--border:after,.el-table--group:after,.el-table:before {
            background-color: #E2E2E2;
        }
        .el-table--border,.el-table--group {
            border-color: #E2E2E2;
        }
        .el-table td,.el-table th.is-leaf {
            border-bottom: 1px solid #E2E2E2;
        }

        .el-table--border th,.el-table--border th.gutter:last-of-type {
            border-bottom: 1px solid #E2E2E2;
        }
        .el-table--border td,.el-table--border th {
            border-right: 1px solid #E2E2E2;
        }
        .success-row td{
            background: #ffffff!important;
        }
        .warning-row td{
            background: #F8F8F8!important;
        }
        .selected-row td{
            background: rgba(85, 116, 215, 0.1)!important;
        }
	</style>
</html>
